<template>
  <div style="width: 80%; margin: 0px auto">
    <!-- 左右两部分开始 -->
    <div class="searchContain">
      <!-- 搜索框开始 -->
      <el-input
        class="searchIn"
        v-model="page.message"
        placeholder="搜索您感兴趣的帖子..."
      ></el-input>
      <!-- 搜索图标按钮 -->
      <el-button
        id="searchBtn1"
        icon="el-icon-search"
        type="primary"
        @click="search"
      ></el-button>
      <!-- 搜索图标按钮 -->
      <!-- 搜索框结束 -->
    </div>
    <div v-if="postLists.length == 0?false:true" style="display: flex">
      <div style="width: 90%;">
        <div
          v-for="(item, index) in postLists"
          :key="index"
          style="
            width:850px;
            height: 100px;
            margin: 10px 65px;
            box-shadow: 0px 0px 10px rgba(106, 104, 104, 0.2); /* 更强烈的凸出效果 */
          "
        >
          <div style="display: flex;padding: 30px 35px;">
            <!-- 头像这些开始 -->
            <el-avatar :src="item.head" :size="50"></el-avatar>
            <div>
              <div
                style="
                  line-height: 30px;
                  font-size: 15px;
                  font-weight: 600;
                  color: #2a332fd6;
                "
              >
                <!-- 昵称 -->
                {{ item.nickName }}
              </div>
              <div style="font-size: 12px; color: #9f9b9b">
                {{ item.postingTime }}
              </div>
            </div>
            <!-- 头像这些结束 -->
            <!-- 标题开始 -->
            <div style="margin-left: 140px; margin-top: 15px; width: 350px">
              <el-tooltip
                :content="'标题:'+item.title"
                placement="bottom"
                effect="light"
                :disabled="showTitle"
              >
                <!-- 这地方的跳转单独弄一个界面，然后在那个界面显示这个帖子的具体内容和评论啥的 -->
                <el-link @mousemove="showTitle=true" @click="goPostDetails(item.id)" style="font-size: 20px" target="_blank">
                  {{ getSubStringTitle(item.title)
                  }}<i class="el-icon-view el-icon--right"></i
                ></el-link>
              </el-tooltip>
            </div>
            <!-- 标题结束 -->
            <!-- 回复条数开始 -->
            <div style="margin-left: 65px; margin-top: 45px">
              <span style="font-size: 10px; color: #9f9b9b"
                >共<span style="color: #ed6a12;">{{ item.totalApply }}</span>条回复</span
              >
            </div>
            <!-- 回复条数结束 -->
          </div>
        </div>
      </div>
      <div style="margin-left: 40px">
        <div>
          <!-- 这地方的跳转单独弄一个界面，然后在那个界面输入自己想要发布的内容，如果没登录就跳转到登录页 -->
          <el-tooltip content="发表文章" placement="right" effect="light"
            ><el-button
            @click="toAddPost"
              type="primary"
              style="width: 50px; height: 50px"
              icon="el-icon-edit"
              circle
              plain
            ></el-button
          ></el-tooltip>
        </div>
        <br />
        <el-tooltip content="刷新" placement="right" effect="light"
          ><el-button
            @click="getList"
            style="width: 50px; height: 50px"
            icon="el-icon-refresh"
            circle
          ></el-button
        ></el-tooltip>
      </div>
    </div>
    <!-- 左右两部分结束 -->
    <!-- 分页开始 -->
    <br />
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.currentPage"
        :page-sizes="[5, 21, 27, 36]"
        :page-size="page.pageSize"
        layout="total, prev, pager, next, sizes"
        :total="page.total"
      >
      </el-pagination>
    </div>
    <!-- 分页结束 -->
  </div>
</template>
    
<script>
import { getPost } from "../../api/postMg";
export default {
  name: "PostList",
  data() {
    return {
      showTitle:false,
      page: {
        currentPage: 1,
        pageSize: 5,
        total: 10,
        message: "",
      },
      postLists: [],
    };
  },

  methods: {
    search() {
      //点击搜索
      this.page.currentPage = 1;
      this.getList();
    },
    goPostDetails(id){
      console.log(id)
      this.showTitle=false
      //给文章id加密
      id = window.btoa(unescape(encodeURIComponent(id)))
      window.open('/details?post='+id, '_blank')
    },
    toAddPost(){
      //触发事件跟PostView说，再跟productView说要跳转到personView下的EditPost去，同时传参
      if(localStorage.getItem("userId")==null || localStorage.getItem("userId").length==0){
        this.$message.info("未登录")
        location.href = "/login"
        return;
      }
      this.$emit("toPostView")
    },
    getList() {
      // 在这里获取所有的帖子，并分页，传给后端page对象
      getPost(this.page).then((res) => {
        if (res.data.code == 200) {
          // console.log(res.data)
          this.postLists = res.data.data.list;
          this.page.total = res.data.data.total;
        } else {
          this.$message.error(res.data.code + "::" + res.data.msg);
        }
      });
    },
    handleSizeChange(pageSize) {
      //改变每页尺寸触发事件
      this.page.pageSize = pageSize;
      this.getList();
    },
    handleCurrentChange(currentPage) {
      //改变当前页也会触发事件
      this.page.currentPage = currentPage;
      this.getList();
    },
    getSubStringTitle(str) {
      //截取书名前20个字符
      if (str != null && str.length > 15) {
        return str.slice(0, 15) + "...";
      } else {
        return str;
      }
    },
  },
  mounted() {
    this.getList();
  },
};
</script>
<style>
/* 搜索容器 */
.searchContain {
  display: flex;
  width: 80%;
  margin: 10px 180px;
}
.searchIn > input {
  border-radius: 100px !important;
}
#searchBtn1 {
  width: 90px;
  transform: translate(-100%, 0);
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
}
</style>